import React from 'react';
import {Marker} from 'react-bmap';
import BMap from 'BMap';
import red_marker from '../../assets/red_marker.png';
import device_0 from '../../assets/device_0.png';
import device_1 from '../../assets/device_1.png';
import device_2 from '../../assets/device_2.png';

const statusMap = [device_0, device_1, device_2];


//这是个箭头函数  ，参数为{position。。。}
const CustomMark = (
    {
        position = {
            lng: 116.402544,
            lat: 39.928216
        },
        title='',
        width = 10,
        height = 10,
        background = `blue`,
        textAlign = 'center',
        lineHeight = '1em',
        color = 'white',
        index = '',
        status,
        events = {
            click() {
            }
        },
        ...otherProps
    }
                    ) => {
        if (typeof status === 'number') {
            width = 32;
            height = 32;
            background = `red`
        }
        const style = {
            width: width + 'px',
            height: height + 'px',
            borderRadius:'10px',
            border:'2px solid white',
            boxShadow:'0 0 3px 1px blue',
            cursor:'pointer',
            textAlign,
            color,
            background,
            backgroundSize: 'cover',
            backgroundRepeat: 'no-repeat',
        };
        const offset = new BMap.Size(-width / 2, -height);
        return (
            // fragment:没有意义的元素
            <React.Fragment>
                <Marker position={position} offset={offset}  {...otherProps} animation={true} >
                    <div style={style} onClick={events.click} title={title}>
                        {/*<span></span>*/}
                    </div>
                </Marker>
            </React.Fragment>
        )

};

//返回一个函数：参数是标注点的信息
export default CustomMark;
